import React, { useState } from 'react';
import { LeftOutline, DownOutline, SearchOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import './help.css';

const Help: React.FC = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<'faq' | 'service'>('faq');
  const [activeCategory, setActiveCategory] = useState<string>('常见问题');
  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
  const [searchQuery, setSearchQuery] = useState('');

  // FAQ数据
  const faqData = [
    {
      id: 1,
      question: '我如何开始使用运动健身APP?',
      answer: '您可以通过以下步骤开始使用：1. 注册账号 2. 完善个人资料 3. 选择训练计划 4. 开始您的健身之旅。',
      category: '常见问题'
    },
    {
      id: 2,
      question: '可以在运动健身APP上记录我的运动数据吗?',
      answer: '是的，您可以在我们的运动健身APP上记录您的运动数据。我们提供各种功能，例如计步器、跑步追踪、心率监测等来帮助您全面记录和分析您的运动表现。',
      category: '常见问题'
    },
    {
      id: 3,
      question: '我如何设置我的个人资料?',
      answer: '点击个人中心，选择"个人资料"，您可以设置头像、昵称、身高体重等基本信息，这些信息将帮助我们为您推荐更合适的训练计划。',
      category: '常见问题'
    },
    {
      id: 4,
      question: '可以设置个人的健身目标吗?',
      answer: '当然可以！在个人资料页面，您可以设置减脂、增肌、塑形等不同的健身目标，我们会根据您的目标制定个性化的训练计划。',
      category: '常见问题'
    },
    {
      id: 5,
      question: '我可以与其他用户互动吗?',
      answer: '是的，您可以关注其他用户，查看他们的训练动态，互相鼓励，还可以加入训练小组一起打卡。',
      category: '会员'
    },
    {
      id: 6,
      question: '可以在不购买高级会员的情况下使用吗?',
      answer: '基础功能是免费的，包括基本的训练计划和数据记录。高级会员可以享受更多专业训练课程和数据分析功能。',
      category: '会员'
    },
    {
      id: 7,
      question: '如何制定训练计划?',
      answer: '根据您的健身目标和当前水平，我们的AI系统会为您推荐合适的训练计划，您也可以手动调整训练强度和频率。',
      category: '运动'
    },
    {
      id: 8,
      question: '如何联系客服?',
      answer: '您可以通过APP内的在线客服、邮箱support@fitness.com或客服热线400-123-4567联系我们。',
      category: '其他'
    }
  ];

  const categories = ['常见问题', '会员', '运动', '其他'];

  // 筛选数据
  const filteredData = faqData.filter(item => {
    const matchesCategory = activeCategory === '常见问题' || item.category === activeCategory;
    const matchesSearch = searchQuery === '' || 
      item.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.answer.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  // 切换展开状态
  const toggleExpanded = (id: number) => {
    const newExpanded = new Set(expandedItems);
    if (newExpanded.has(id)) {
      newExpanded.delete(id);
    } else {
      newExpanded.add(id);
    }
    setExpandedItems(newExpanded);
  };

  return (
    <div className="help-page">
      {/* 头部导航 */}
      <div className="help-header">
        <div className="back-btn" onClick={() => navigate('/index/profile')}>
          <LeftOutline />
        </div>
        <div className="page-title">帮助中心</div>
        <div className="header-icon">⚡</div>
      </div>

      {/* 标签页 */}
      <div className="tabs-container">
        <div 
          className={`tab ${activeTab === 'faq' ? 'active' : ''}`}
          onClick={() => setActiveTab('faq')}
        >
          常见问题
        </div>
        <div 
          className={`tab ${activeTab === 'service' ? 'active' : ''}`}
          onClick={() => setActiveTab('service')}
        >
          客户服务
          
        </div>
      </div>

      {/* 搜索栏 - 只在常见问题标签显示 */}
      {activeTab === 'faq' && (
        <div className="search-container">
          <div className="search-bar">
            <SearchOutline className="search-icon" />
            <input
              type="text"
              placeholder="搜索"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="search-input"
            />
          </div>
        </div>
      )}

      {/* 分类筛选 - 只在常见问题标签显示 */}
      {activeTab === 'faq' && (
        <div className="category-container">
          {categories.map(category => (
            <div
              key={category}
              className={`category-btn ${activeCategory === category ? 'active' : ''}`}
              onClick={() => setActiveCategory(category)}
            >
              {category}
            </div>
          ))}
        </div>
      )}

      {/* 内容区域 */}
      {activeTab === 'faq' ? (
        /* FAQ列表 */
        <div className="faq-container">
          {filteredData.map((item) => (
            <div key={item.id} className="faq-item">
              <div 
                className="faq-question"
                onClick={() => toggleExpanded(item.id)}
              >
                <span className="question-text">{item.question}</span>
                <DownOutline 
                  className={`expand-icon ${expandedItems.has(item.id) ? 'expanded' : ''}`}
                />
              </div>
              {expandedItems.has(item.id) && (
                <div className="faq-answer">
                  {item.answer}
                </div>
              )}
            </div>
          ))}
        </div>
      ) : (
        /* 客户服务内容 */
        <div className="service-container">
          <div className="service-header">
            <h3>联系客服</h3>
            <p>我们随时为您提供帮助</p>
          </div>
          
          <div className="service-methods">
            <div className="service-method" onClick={() => navigate('/customer-service')}>
              <div className="method-icon">
                <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                  <path d="M864.2048 406.1696a352.6144 352.6144 0 0 0-704.4096 0 127.1808 127.1808 0 0 0-96.6656 123.2384v88.32a126.9248 126.9248 0 1 0 253.8496 0V529.408a127.1808 127.1808 0 0 0-95.6416-122.88 291.1744 291.1744 0 0 1 581.3248 0 127.1808 127.1808 0 0 0-95.6416 122.88v88.32A127.1808 127.1808 0 0 0 788.48 736.2048c-21.8624 32.2048-70.8608 80.7424-174.08 102.4a66.56 66.56 0 0 0-53.0944-26.4192h-51.2a66.56 66.56 0 1 0 0 133.4784h51.2a66.56 66.56 0 0 0 63.3344-46.5408c153.6-31.2832 211.5072-116.6336 230.656-156.3136a127.1296 127.1296 0 0 0 105.5744-125.0816V529.408a127.1808 127.1808 0 0 0-96.6656-123.2384zM255.5392 529.408v88.32a65.5872 65.5872 0 0 1-65.4848 65.4848 65.5872 65.5872 0 0 1-65.4848-65.4848V529.408a65.4848 65.4848 0 0 1 130.9696 0z m643.8912 88.32a65.536 65.536 0 0 1-63.6416 65.3824h-3.584a65.4848 65.4848 0 0 1-63.744-65.3824V529.408a65.4848 65.4848 0 1 1 130.9696 0z" fill="#ee6b08" p-id="1034"></path>
                </svg>
              </div>
              <div className="method-content">
                <h4>在线客服</h4>
                <p>立即咨询</p>
                <span className="method-time">24小时在线</span>
              </div>
            </div>
          </div>
          
          <div className="service-image">
            <img src="/image/nv1.jpg" alt="客服团队" className="service-team-img" />
            <div className="image-overlay">
              <h4>专业客服团队</h4>
              <p>为您提供7x24小时专业服务</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Help;

